/* eslint-disable @typescript-eslint/no-explicit-any */
import { Button, Form, Input, message } from 'antd';
import { useForm } from 'antd/es/form/Form';
import { useNavigate } from 'react-router-dom';
import styles from './updatepassword.module.less'
import { updatePassowrdCaptcha, updatePassword } from '../../interfaces';


function UpdatePassword() {
    const [form] = useForm();
    const navigate = useNavigate();


    const onFinish = async (values: UpdatePasswordForm) => {
        if (values.password !== values.confirmPassword) {
            return message.error('两次密码不一致');
        }
        try {
            const res = await updatePassword(values);

            if (res.status === 201 || res.status === 200) {
                message.success('密码修改成功');
                setTimeout(() => {
                    navigate('/login');
                }, 1500);
            }
        } catch (e: any) {
            message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
        }
    }

    const sendCaptcha = async function () {
        const address = form.getFieldValue('email')
        console.log(address)
        if (!address) {
            return message.error('请输入邮箱地址')
        }
        try {
            const res = await updatePassowrdCaptcha(address)
            if (res.status === 201 || res.status === 200) {
                message.success('验证码发送成功，请注意查收')
            }
        } catch (e: any) {
            message.error(e.response?.data?.message || '验证码发送失败，请稍后再试')
        }
    }



    return <div className={styles.updatePassword_container}>
        <h1>TUTU会客室</h1>
        <Form
            form={form}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
        >
            <Form.Item
                label="用户名"
                name="username"
                rules={[
                    { message: '请输入用户名!' },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="邮箱"
                name="email"
                rules={[
                    { message: '请输入邮箱!' },
                    { type: "email", message: '请输入合法邮箱地址!' }
                ]}
            >
                <Input />
            </Form.Item>

            <div className={styles.captcha_wrapper}>
                <Form.Item
                    label="验证码"
                    name="captcha"
                    rules={[{ message: '请输入验证码!' }]}
                >
                    <Input />
                </Form.Item>
                <Button type="primary" className={styles.btn_register} onClick={sendCaptcha}>发送验证码</Button>
            </div>

            <Form.Item
                label="新密码"
                name="password"
                rules={[{ message: '请输入密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                label="确认密码"
                name="confirmPassword"
                rules={[{ message: '请输入确认密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item

                label=" "
            >
                <Button className={styles.btn} type="primary" htmlType="submit">
                    修改
                </Button>
            </Form.Item>
        </Form>
    </div>

}

export default UpdatePassword




/**
 * 8.12
 * 输入邮箱，点击发送验证码却显示请输入邮箱，最后排查出来是我没有绑定from数据给form表单
 * 出现404 bad request，排查后发现是接口写了两个updatePassword方法，导致路由冲突，导致请求不到正确的接口
 * 瞬间悟到了400错误是因为前端提交的数据类型和后端的接口参数类型不匹配，导致接口报错
 * 都写到这里了才发现自己根本没有在后端写 /user/update_password的接口,,,
 */